
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background:rgb(179, 215, 243);
       }
        
        .card{
            display: flex;
            flex-direction: column;
            background-color: white;     
            margin: 20px;  
        }
        .card .content  {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 20px;
            white-space: nowrap;
        }
        .card .content span{
            margin-top: 5px;
        }
        .card .detail{
            width: 100%;
            height: 10px;
            background: aliceblue;
            cursor: pointer;
            transition: all 0.5s;
            border-radius: 0 0 10px 10px;
            display: flex;
            flex-direction: column;
           
        }
        .card .detail:hover{
            height: 90px;
            display: block;
            cursor: pointer;
            transition: all 0.5s;
            border-radius: 0 0 10px 10px;
            display: flex;
            flex-direction: column;
        }
        .card .detail:hover .nav{
            
            display: flex;
            flex-direction: column;
            margin: 20px;
        }
       
        .card .detail .nav {
           display: none;
        }
        #app{
            display: flex;
            justify-content: flex-start;
            width: 1000px;
            margin: 0 auto;
            margin-top: 200px;
        }
        .card-input{
            background-color: white;
            margin: 20px;
            padding:20px;
        }
    </style>
    

</head>

<body>

    <div id="app">
        <div class="card-input">
            <h3>学生成绩填报表</h3>
            <div class="item">姓名：<input type="text" v-model="name" /></div>
            <div class="item">年龄：<input type="text" v-model="age" /></div>
            <div class="item">性别：<input type="text" v-model="sex" /></div>
            <div class="item">语文：<input type="text" v-model="yw" /></div>
            <div class="item">数学：<input type="text" v-model="sx" /></div>
            <div class="item">英语：<input type="text" v-model="yy" /></div>
            <input type="button" value="添加" @click="add">
        </div>
        
        <div class="card"  v-for="item in list"  key="item.name">
            <div class="content">
                <div class="img">
                    <img v-bind:src="item.head" />
                </div>
                <span>姓名：{{item.name}}</span>
                <span>年龄：{{item.age}}</span>
                <span>性别：{{item.sex}}</span>
                <span>总分: {{item.yw +item.sx +item.yy}}</span>

            </div>
            <div  class="detail" v-if="(item.yw >=60) & (item.sx >=60) &(item.yy >=60)">
                <div class="nav">
                    <span>语文：{{item.yw}}</span>
                    <span>数学：{{item.sx}}</span>
                    <span>英语：{{item.yy}}</span>
                </div>
            </div> 
        </div>
           
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        var v = new Vue({
            el:"#app",
            data:{
                name:'',age:'',sex:'',head:'',yw:'',sx:'',yy:'',
                list:[
                {name:'张三',age:21,sex:'男',head:'1.png',yw:80,sx:80,yy:80,},
                    {name:'李四',age:20,sex:'男',head:'2.png',yw:60,sx:30,yy:100,},
                    {name:'王五',age:20,sex:'男',head:'3.png',yw:80,sx:100,yy:60,}
            ]
            },
            methods:{
                add(){//绑定的按钮事件执行一下添加
                	//局部要用this引用，通过输入框传入的数据渲染到表格上
                    this.list.push({name:this.name,age:this.age,sex:this.sex,yw:this.yw-0,sx:this.sx-0,yy:this.yy-0})
                    //添加完之后默认输入框为空
                    name:this.name;
                    age:this.age;
                    sex:this.sex;
                    yw:this.yw;
                    sx:this.sx;
                    yy:this.yy;
                }
            }
        })
    </script>

</body>
</html>
